<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { User, Clock } from '@element-plus/icons-vue'
import serverIcon from '../assets/server.svg'
import clientIcon from '../assets/clients.svg'
import officialIcon from '../assets/official.svg'
import ajax from "../main.ts";
import { useRouter } from 'vue-router'

interface ContentItem {
  id: string
  title: string
  desc: string
  avatar: string
  author: string
  views: number
  favorites: number
  publishTime: string
  githubUrl?: string
  tags?: string[]
  rating?: number
  status?: string
  version?: string
  type?: string
  office?: number
}

const stats = ref({
  servers: 100,
  clients: 99
});

const searchQuery = ref('')
const activeTab = ref('最新发布')
const currentPage = ref(1)
const initialPageSize = 9 // 初始加载9个卡片
const loadMoreSize = 3 // 后续每次加载3个卡片
const loading = ref(false)
const hasMore = ref(true)
const tabContents = ref<ContentItem[]>([]) // 修改为响应式数组，只存储当前分类的数据

const categories = [
  { id: '全部', name: '全部', icon: '🌐' },
  { id: 'Servers', name: 'Servers', icon: '🖥️' },
  { id: 'Clients', name: 'Clients', icon: '📱' },
  { id: '最新发布', name: '最新发布', icon: '🕒' },
  { id: '最受欢迎', name: '最受欢迎', icon: '🔥' },
  { id: '官方发布', name: '官方发布', icon: '✨' },
  { id: 'divider', name: '', icon: '', isDivider: true },
  { id: '检索', name: '检索', icon: '🔍' },
  { id: '云平台', name: '云平台', icon: '☁️' },
  { id: '自动化', name: '自动化', icon: '🤖' },
  { id: '数据库', name: '数据库', icon: '💾' },
  { id: '文件', name: '文件', icon: '📂' },
  { id: '系统', name: '系统', icon: '⚙️' },
  { id: '金融', name: '金融', icon: '💰' },
  { id: '社交', name: '社交', icon: '👥' },
  { id: '开发', name: '开发', icon: '👨‍💻' },
  { id: '多媒体', name: '多媒体', icon: '🎥' },
  { id: '安全', name: '安全', icon: '🔒' }
]

const router = useRouter()

const getTypeIcon = (type?: string): string | undefined => {
  if (type === 'server') return serverIcon
  if (type === 'client') return clientIcon
  return undefined
}

const viewDetail = (id: string) => {
  router.push({
    name: 'show',
    query: { category: activeTab.value, id: id }
  })
}

const getMcpNum = async () => {
  try {
    ajax.get('getMcpNum/').then(res => {
      if (res.data.code === 200){
          stats.value.servers = res.data.server
          stats.value.clients = res.data.client
      }else {
        console.log(res.data.msg)
      }
    })
  } catch (error) {
    console.error('获取MCP数量失败:', error)
  }
}

const getMcpInfo = async () => {
  if (loading.value) return
  loading.value = true
  
  try {
    let offset = 0
    if (currentPage.value === 1) {
      offset = 0
    } else {
      offset = initialPageSize + (currentPage.value - 2) * loadMoreSize
    }
    
    const actualPageSize = currentPage.value === 1 ? initialPageSize : loadMoreSize
    const backendPage = currentPage.value === 1 ? 1 : Math.floor(offset / loadMoreSize) + 1
    
    const params = {
      category: activeTab.value,
      offset,
      limit: actualPageSize,
      pageSize: currentPage.value === 1 ? initialPageSize : loadMoreSize,
      page: backendPage,
      keyword: searchQuery.value
    }
    
    ajax.get('getMcpInfo/', { params }).then(res => {
      if (res.data.code === 200) {
        const newItems = res.data.data || []
        
        if (currentPage.value === 1) {
          tabContents.value = newItems
        } else {
          tabContents.value = [...tabContents.value, ...newItems]
        }
        
        const moreDataAvailable = newItems.length === actualPageSize
        hasMore.value = moreDataAvailable
      }
    }).finally(() => {
      loading.value = false
    })
  } catch (error) {
    loading.value = false
  }
}

// 监听分类变化，重置分页并重新获取数据
watch(activeTab, () => {
  currentPage.value = 1
  hasMore.value = true
  tabContents.value = [] // 清空现有数据
  getMcpInfo()
})

// 监听搜索框变化，重置分页并重新获取数据
watch(searchQuery, () => {
  currentPage.value = 1
  hasMore.value = true
  tabContents.value = [] // 清空现有数据
  getMcpInfo()
})

// 修改滚动监听，只保留加载更多功能
const handleScroll = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop
  const scrollHeight = document.documentElement.scrollHeight
  const clientHeight = document.documentElement.clientHeight
  
  if (scrollHeight - scrollTop - clientHeight < 200 && !loading.value && hasMore.value) {
    currentPage.value++
    getMcpInfo()
  }
}

// 使用 Intersection Observer 作为备选加载机制
let observer: IntersectionObserver | null = null

onMounted(() => {
  getMcpNum()
  getMcpInfo()
  
  const options = {
    rootMargin: '0px 0px 200px 0px',
    threshold: 0.1
  }
  
  observer = new IntersectionObserver((entries) => {
    const [entry] = entries
    if (entry.isIntersecting && !loading.value && hasMore.value) {
      currentPage.value++
      getMcpInfo()
    }
  }, options)
  
  setTimeout(() => {
    const scrollTip = document.querySelector('.scroll-tip-container')
    if (scrollTip && observer) {
      observer.observe(scrollTip)
    }
  }, 1000)
  
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
  // 移除全局滚动监听
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div class="page-container">
    <div class="stats-container">
      <div class="stats-box">
        <div class="stats-content">
          <div class="number-wrapper">
            <span class="highlight">{{ stats.servers }}</span>
            <span class="unit">个</span>
          </div>
          <span class="text">MCP Server</span>
          和
          <div class="number-wrapper">
            <span class="highlight">{{ stats.clients }}</span>
            <span class="unit">个</span>
          </div>
          <span class="text">MCP Client 正在期待与您携手共创</span>

        </div>
      </div>
    </div>

    <div class="title-section">
      <h1 class="main-title">
        <span class="title-text">MCP Server / Client</span>
        <span class="title-highlight">空间站</span>
      </h1>
      <p class="slogan">MCP让AI释放无限潜力</p>
    </div>

    <div class="search-container">
      <div class="search-wrapper">
        <div class="search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
          </svg>
        </div>
        <input 
          type="text" 
          v-model="searchQuery"
          class="search-input" 
          placeholder="搜索 MCP Server或Client"
        >
      </div>
    </div>

    <div class="tabs-container">
      <div class="tabs-sidebar">
        <div 
          v-for="tab in categories" 
          :key="tab.id"
          class="tab-item"
          :class="{ 
            'active': activeTab === tab.id,
            'divider': tab.isDivider 
          }"
          @click="!tab.isDivider && (activeTab = tab.id)"
        >
          <template v-if="!tab.isDivider">
            <span class="tab-icon">{{ tab.icon }}</span>
            <span class="tab-name">{{ tab.name }}</span>
          </template>
        </div>
      </div>
      
      <div class="tabs-content">
        <transition name="fade" mode="out-in">
          <div :key="activeTab" class="content-grid">
            <div 
              v-for="item in tabContents" 
              :key="item.id"
              class="content-card"
              @click="viewDetail(item.id)"
            >
              <div class="card-body">
                <div class="title-row">
                  <img :src="item.avatar" :alt="item.title" class="card-image">
                  <img v-if="getTypeIcon(item.type)" :src="getTypeIcon(item.type)" class="type-icon" :alt="item.type">
                  <h3 class="card-title">{{ item.title }}</h3>
                  <img v-if="item.office === 1" :src="officialIcon" class="official-icon" alt="官方认证">
                </div>
                
                <div class="card-meta">
                  <div class="meta-left">
                    <el-icon class="meta-icon"><User /></el-icon>
                    <span>{{ item.author }}</span>
                  </div>
                  <div class="meta-right">
                    <el-icon class="meta-icon"><Clock /></el-icon>
                    <span class="publish-time">{{ item.publishTime }}</span>
                  </div>
                </div>

                <p class="card-desc">{{ item.desc }}</p>
                
                <div class="tags-container">
                  <span v-for="(tag, index) in item.tags?.slice(0, 3)" :key="tag" class="tag">
                    {{ tag }}
                  </span>
                </div>
              </div>

              <div class="card-footer">
                <div class="stats">
                  <span class="stat-item">
                    <i class="icon-eye">👁️</i>
                    {{ item.views }}
                  </span>
                  <span class="stat-item">
                    <i class="icon-star">⭐</i>
                    {{ item.favorites }}
                  </span>
                </div>
                <a 
                  :href="item.githubUrl" 
                  target="_blank" 
                  class="github-btn"
                  title="去GitHub查看项目"
                  @click.stop
                >
                  <svg height="24" viewBox="0 0 16 16" width="24" class="github-icon">
                    <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </transition>
        
        <div v-if="hasMore" class="scroll-tip-container" :class="{ 'loading': loading }">
          <div class="scroll-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 5v14M5 12l7 7 7-7"/>
            </svg>
          </div>
          <div class="scroll-text">{{ loading ? '加载中...' : '滑动查看更多' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  min-height: 100vh;
  padding-top: 70px;
}

.stats-container {
  width: 100%;
  padding: 1rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stats-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(231, 233, 255, 0.8);
  border-radius: 16px;
  padding: 1.2rem 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05),
              0 2px 8px rgba(99, 102, 241, 0.06);
  transition: all 0.3s ease;
}

.stats-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08),
              0 4px 12px rgba(99, 102, 241, 0.1);
}

.stats-content {
  font-size: 1.1rem;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 1.5;
}

.number-wrapper {
  display: inline-flex;
  align-items: baseline;
  margin: 0 0.15rem;
}

.highlight {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0 0.15rem;
}

.unit {
  color: #6366f1;
  font-size: 1rem;
  font-weight: 500;
}

.text {
  color: #4b5563;
  font-weight: 500;
}

.title-section {
  text-align: center;
  margin-top: 0;
}

.main-title {
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

.title-text {
  font-family: 'Arial', sans-serif;
}

.title-highlight {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 0.5rem;
}

.slogan {
  font-size: 1.2rem;
  color: #6b7280;
  margin: 1rem 0 0 0;
  font-weight: 400;
  letter-spacing: 0.05em;
  position: relative;
  display: inline-block;
}

.slogan::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
}

.search-container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.search-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid rgba(99, 102, 241, 0.15);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08),
              0 4px 12px rgba(99, 102, 241, 0.08),
              inset 0 2px 4px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
}

.search-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
}

.search-wrapper:hover,
.search-wrapper:focus-within {
  border-color: #6366f1;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12),
              0 8px 20px rgba(99, 102, 241, 0.12),
              inset 0 2px 4px rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

.search-icon {
  width: 24px;
  height: 24px;
  color: #6366f1;
  margin-left: 1.5rem;
  flex-shrink: 0;
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.2));
}

.search-input {
  width: 100%;
  padding: 1.3rem 1.5rem;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  color: #1f2937;
  outline: none;
  font-weight: 500;
}

.search-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
  opacity: 0.8;
}

@media (max-width: 640px) {
  .page-container {
    gap: 2.5rem;
  }
  
  .stats-box {
    padding: 1rem 1.5rem;
  }
  
  .stats-content {
    font-size: 1rem;
  }
  
  .highlight {
    font-size: 1.3rem;
  }
  
  .unit {
    font-size: 0.9rem;
  }

  .main-title {
    font-size: 2rem;
  }
  
  .slogan {
    font-size: 1rem;
  }

  .search-container {
    max-width: 100%;
    padding: 0 1rem;
  }

  .search-wrapper {
    border-radius: 16px;
  }

  .search-icon {
    width: 20px;
    height: 20px;
    margin-left: 1.2rem;
  }

  .search-input {
    padding: 1.1rem 1.2rem;
    font-size: 1rem;
  }
}

.tabs-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  gap: 2.25rem;
  padding: 0 2rem;
  position: relative;
}

.tabs-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  margin-left: -1rem;
  border: 1px solid rgba(231, 233, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: -webkit-sticky; /* Safari支持 */
  position: sticky; /* 使用粘性定位 */
  top: min(80vh, 80px); /* 设置最小距离为80vh */
  align-self: flex-start; /* 确保从顶部开始定位 */
  max-height: calc(100vh - 100px); /* 最大高度限制，避免太长 */
  overflow-y: auto; /* 内容太多时可以滚动 */
  z-index: 50; /* 确保在内容之上 */
  transition: top 0.3s ease; /* 添加平滑过渡效果 */
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #4b5563;
  margin-bottom: 0.375rem;
}

.tab-item:hover {
  background: rgba(99, 102, 241, 0.04);
  color: #6366f1;
}

.tab-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  font-weight: 500;
}

.tab-item.divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.1),
    rgba(99, 102, 241, 0.2),
    rgba(99, 102, 241, 0.1),
    transparent
  );
  margin: 0.75rem 0;
  padding: 0;
  cursor: default;
  pointer-events: none;
}

.tab-item.divider:hover {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.1),
    rgba(99, 102, 241, 0.2),
    rgba(99, 102, 241, 0.1),
    transparent
  );
}

.tab-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.tab-name {
  font-size: 0.95rem;
}

.tabs-content {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  margin-right: 0.5rem;
  border: 1px solid rgba(231, 233, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow-y: visible;
  height: auto;
  min-height: 500px;
  position: relative;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.content-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  border: 1px solid rgba(231, 233, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(99, 102, 241, 0.2);
}

.content-card:active {
  transform: translateY(0);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 0;
  display: flex;
  flex-direction: column;
  border-bottom: none;
  background: none;
}

.header-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  overflow: hidden;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.card-image {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.type-icon {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6b7280;
  font-size: 0.875rem;
}

.meta-left, .meta-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.meta-icon {
  font-size: 0.95rem;
  color: #8b5cf6;
}

.publish-time {
  color: #9CA3AF;
}

.card-desc {
  font-size: 0.95rem;
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tag {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
  padding: 0.35rem 0.875rem;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.content-card:hover .tag {
  background: rgba(99, 102, 241, 0.12);
}

.card-footer {
  padding: 1.25rem;
  border-top: 1px solid rgba(231, 233, 255, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to top, rgba(249, 250, 251, 0.95), rgba(255, 255, 255, 0.95));
}

.stats {
  display: flex;
  gap: 1.25rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #6b7280;
  font-size: 0.95rem;
}

.icon-eye, .icon-star {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.9;
}

.github-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 8px;
  color: #8b5cf6;
  transition: all 0.2s ease;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: rgba(139, 92, 246, 0.04);
}

.github-btn:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.4);
  color: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

.github-btn:active {
  transform: translateY(0);
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
}

.github-icon {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.1));
}

@media (max-width: 1280px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tabs-container {
    padding: 0 1rem;
    gap: 1.5rem;
    flex-direction: column;
  }
  
  .tabs-sidebar {
    width: 100%;
    margin: 0;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    position: sticky; /* 保持固定定位 */
    top: 72px; /* 移动端导航栏高度(56px) + 额外间距(16px) */
    max-height: 80vh;
  }
  
  .tab-item {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    border-radius: 8px;
    width: auto;
  }
  
  .tab-item.divider {
    display: none;
  }
  
  .tabs-content {
    padding: 1.25rem 1rem;
    margin-right: 0;
    overflow-y: visible;
    height: auto;
  }

  .content-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .page-container {
    padding-top: 56px; /* 移动端导航栏高度 */
  }
}

@media (max-width: 375px) {
  .tab-item {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
  
  .tab-icon {
    font-size: 1.1rem;
  }
  
  .tab-name {
    font-size: 0.85rem;
  }
  
  .stats-content {
    font-size: 0.9rem;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.content-card:hover .type-icon {
  opacity: 1;
  transform: scale(1.1);
}

.load-more-container {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.load-more-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.load-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}

.load-more-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.scroll-tip-container {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #6366f1;
  animation: pulse 2s infinite;
}

.scroll-tip-container.loading {
  animation: none;
  color: #9ca3af;
}

.scroll-icon {
  margin-bottom: 0.5rem;
}

.scroll-text {
  font-size: 0.95rem;
  font-weight: 500;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(5px);
  }
  100% {
    opacity: 0.7;
    transform: translateY(0);
  }
}

.official-icon {
  width: 20px;
  height: 20px;
  margin-left: 0px;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.content-card:hover .official-icon {
  opacity: 1;
  transform: scale(1.1);
}
</style>